<template>
    <div class="hc-deliver-section-entrance">
        <div v-show="!centerDialogVisible">
            <el-carousel indicator-position="outside" :arrow="sectionList.length<=1?'never':''"
                         :autoplay="false" class="hc-deliver-section-detail__carousel"
                         :loop="true" :interval="999999"
                         trigger="click">
                <el-carousel-item v-for="(smallList, listIndex) in sectionList" :key="listIndex"
                                  style="display:flex;justify-content: center;align-items: center;">
                    <div class="hc-deliver-section-entrance__section-item"
                         :style="{marginTop: (computeMargin(index, smallList.length) + 'px'), cursor:'pointer', borderRadius:section.sceneType===1?'50%':'',boxShadow:section.sceneType===1?'':'0 0 24px 10px #BDDFF5 inset'}"
                         v-for="(section, index) in smallList" :key="index"
                         :title="section.teachingAssistantTitle +'---'+ titleHandler(section.teachingAssistantCatalogTitle)">
                        <div class="hc-deliver-section-entrance__section-item--box"
                             :style="{position:'relative'}"
                             @click="()=>{sceneType = section.sceneType;showDetail(section.teachingAssistantCatalogId)}">
                            <div  class="hc-deliver-section-entrance__section-item--box-section-container">
                                <div class="hc-deliver-section-entrance__section-item--box-section">
                                    {{titleHandler(section.teachingAssistantCatalogTitle)}}
                                </div>
                            </div>
                            <div style="font-size: 13px;position:absolute;bottom:25px;">已提交:{{
                                (hasNum[section.teachingAssistantCatalogId]? hasNum[section.teachingAssistantCatalogId]
                                : 0)
                                + '/' + ((members[section.teachingAssistantCatalogId])?
                                members[section.teachingAssistantCatalogId]:[]).length}}
                            </div>
                            <div :style="{position:'absolute',bottom: -45 - 25*(section.sceneType-1) + 'px',left:computeFloat(index, smallList.length, section.sceneType, 2)+ 46.5 + '%',width:'7%',height: '7%', borderRadius: '50%',boxShadow: '0 0 4px 1px #f5f7fa7d inset'}"></div>
                            <div :style="{position:'absolute',bottom: -25 - 25*(section.sceneType-1) + 'px',left:computeFloat(index, smallList.length, section.sceneType, 1)+ 44 +'%',width:'12%',height: '12%', borderRadius: '50%',boxShadow: '0 0 4px 1px #f5f7fa7d inset'}"></div>
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
        <el-dialog
                custom-class="hc-deliver-section-detail"
                :visible.sync="centerDialogVisible"
                :modal="false"
                :show-close="false">
            <el-carousel :autoplay="false" class="hc-deliver-section-detail__carousel" height="100%"
                         :loop="true"
                         trigger="click">
                <div class="hc-deliver-section-detail__carousel-header">
                    <span>{{sceneType===1?'作业作答进度表':'试卷作答进度表'}}<span style="font-size:14px;">(提交人数</span><span
                            style="font-size: 17px;">{{hasNum[catalogId] + '/' + ((members[catalogId])? members[catalogId]:[]).length}})</span></span>
                    <el-dropdown @command="switchSort">
                        <div style='width:65px;text-align: center;border-left:2px solid rgba(0,0,0,0.1);' title="切换排序">
                            <i class="iconfont icon-Group-"></i></div>
                        <el-dropdown-menu slot="dropdown"
                                          style="padding:0 4px;text-align: center;width:70px;font-size: 14px;">
                            <el-dropdown-item style="height:35px;border-bottom:1px solid rgba(0,0,0,0.1);padding:0;"
                                              command="memberNumber">学号
                            </el-dropdown-item>
                            <el-dropdown-item style="height:35px;padding:0;" command="finishRate">完成度</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <el-carousel-item
                        v-for="(o,index) in Math.ceil(((members[catalogId])? members[catalogId]:[]).length/pageNum)"
                        :key="index" :interval="999999"
                        class="hc-deliver-section-detail__carousel-item">
                    <div class="hc-deliver-section-detail__carousel-item-box"
                         v-for="(p, subIndex) in Math.ceil(((members[catalogId])? members[catalogId]:[]).slice(index*pageNum,(index+1)*pageNum).length/colNum)"
                         :key="subIndex">
                        <div v-for="(row, leftSubIndex) in ((members[catalogId])? members[catalogId]:[]).slice(index*pageNum,(index+1)*pageNum).slice(subIndex*colNum,(subIndex+1)*colNum)"
                             :key="leftSubIndex+row.memberNumber"
                             class="hc-deliver-section-detail__carousel-item-box--row">
                            <span class="hc-deliver-section-detail__carousel-item-box--row-left"
                                  :title="row.memberNumber">{{row.memberNumber.slice(-5)}}</span>
                            <span class="hc-deliver-section-detail__carousel-item-box--row-mid">{{row.realname}}</span>
                            <div class="hc-deliver-section-detail__carousel-item-box--row-progress-bar">
                                <el-progress :stroke-width="10"
                                             :percentage="Math.floor((row.hasAnswered/questionNum)*100)"></el-progress>
                            </div>
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </el-dialog>
    </div>
</template>

<script>
    import {NetUtil} from '../utils/NetUtil'
    import {sliceArray} from "../utils/utils";
    import {URL} from '../config/UrlConfig'

    export default {
        name: 'selectSection',
        created() {
            this.getSectionList();
            this.intId.push(setInterval(() => {
                this.getSectionList()
            }, 15000))
        },
        beforeDestroy() {
            if (this.intId.length !== 0)
                this.intId.map((value) => {
                    try {
                        clearInterval(value)
                    } catch (e) {
                        console.log(e)
                    }
                });
            if (this.intTid.length !== 0)
                this.intTid.map((value) => {
                    try {
                        clearTimeout(value)
                    } catch (e) {
                        console.log(e)
                    }
                })
        },
        computed: {
            questionNum() {
                return this.sectionDetailData[this.catalogId][1]
            },
        },
        data() {
            return {
                members: {},
                sectionList: [],
                centerDialogVisible: false,
                sectionDetailData: {},
                catalogId: '',
                intId: [],
                intTid: [],
                sortBy: 'memberNumber',
                tag: 'plus',
                colNum: 9,
                pageNum: 18,
                hasNum: {},
                sceneType: 1,
                hanNumList: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
            }
        },
        methods: {

            titleHandler(titleString) {
                //  选修五第三章第一节第一课时醇
                let temp = titleString;
                let index = -1, subIndex = -1, subSubIndex = -1, subSubSubIndex = -1, subSubSubSubIndex = -1;
                this.hanNumList.forEach((num) => {
                    index = (titleString.indexOf('选修' + num) > -1 ? titleString.indexOf('选修' + num) : (titleString.indexOf('必修' + num)));
                    if (index > -1 && temp.length >= index + 3) {
                        if (index === 0) {
                            temp = temp.slice(0, index + 3) + ' ' + temp.slice(index + 3);
                        } else if (index > 0) {
                            temp = temp.slice(0, index) + ' ' + temp.slice(index);
                            temp = temp.slice(0, index + 4) + ' ' + temp.slice(index + 4);
                        }
                    }
                    subIndex = temp.indexOf('第' + num + '章');
                    if (subIndex > -1 && temp.length >= subIndex + 3) {
                        if (subIndex === 0) {
                            temp = temp.slice(0, subIndex + 3) + ' ' + temp.slice(subIndex + 3);
                        } else if (subIndex > 0) {
                            temp = temp.slice(0, subIndex) + ' ' + temp.slice(subIndex);
                            temp = temp.slice(0, subIndex + 4) + ' ' + temp.slice(subIndex + 4);
                        }
                    }
                    subSubIndex = temp.indexOf('第' + num + '节');
                    if (subSubIndex > -1 && temp.length >= subSubIndex + 3) {
                        if (subSubIndex === 0) {
                            temp = temp.slice(0, subSubIndex + 3) + ' ' + temp.slice(subSubIndex + 3);
                        } else if (subSubIndex > 0) {
                            temp = temp.slice(0, subSubIndex) + ' ' + temp.slice(subSubIndex);
                            temp = temp.slice(0, subSubIndex + 4) + ' ' + temp.slice(subSubIndex + 4);
                        }
                    }
                    subSubSubIndex = temp.indexOf('第' + num + '课时');
                    if (subSubSubIndex > -1 && temp.length >= subSubSubIndex + 4) {
                        if (subSubSubIndex === 0) {
                            temp = temp.slice(0, subSubSubIndex + 4) + ' ' + temp.slice(subSubSubIndex + 4);
                        } else if (subSubSubIndex > 0) {
                            temp = temp.slice(0, subSubSubIndex) + ' ' + temp.slice(subSubSubIndex);
                            temp = temp.slice(0, subSubSubIndex + 5) + ' ' + temp.slice(subSubSubIndex + 5);
                        }
                    }
                    subSubSubSubIndex = temp.indexOf('第' + num + '单元');
                    // console.log(subSubSubSubIndex);
                    if (subSubSubSubIndex > -1 && temp.length >= subSubSubSubIndex + 4) {
                        if (subSubSubSubIndex === 0) temp = temp.slice(0, subSubSubSubIndex + 4) + ' ' + temp.slice(subSubSubSubIndex + 4);
                        else if (subSubSubSubIndex > 0) {
                            temp = temp.slice(0, subSubSubSubIndex) + ' ' + temp.slice(subSubSubSubIndex);
                            temp = temp.slice(0, subSubSubSubIndex + 5) + ' ' + temp.slice(subSubSubSubIndex + 5);
                        }
                    }
                });
                return temp;
            },
            getMember(filter) {
                let arr = [];
                let state = JSON.parse(JSON.stringify(this.$store.state.Member));
                if (typeof filter !== 'undefined') {
                    for (let subKey in state.class.member) {
                        let obj = Object.assign({}, state.class.member[subKey]);
                        for (let key in filter) {
                            if (state.class.member[subKey].memberId === key) {
                                obj.hasAnswered = filter[key];
                                arr.push(obj);
                                break
                            }
                        }
                        if (!obj.hasAnswered) {
                            let tag = false;
                            arr.map((value) => {
                                if (value.realname === obj.realname) {
                                    tag = true;
                                }
                            });
                            if (!tag) {
                                obj.hasAnswered = 0;
                                arr.push(obj);
                            }
                        }
                    }
                    return arr
                }
                return []
            },
            showDetail(catalogId) {
                this.catalogId = (catalogId);
                this.centerDialogVisible = true;
            },
            switchSort(command) {
                if (command !== 'memberNumber') {
                    this.sortBy = 'hasAnswered';
                    this.tag = 'decent';
                } else {
                    this.sortBy = 'memberNumber';
                    this.tag = 'plus';
                }
                this.members[this.catalogId].sort(this.compare(this.sortBy, 'memberNumber'))
            },
            compare(A, B) {
                let tag = this.tag;
                if (B === undefined) B = 'memberNumber';
                return function (obj1, obj2) {
                    if (tag === 'plus') {
                        return obj1[A] - obj2[A];
                    } else {
                        if (obj1[A] === obj2[A]) return (obj1[B] - obj2[B]);
                        return -(obj1[A] - obj2[A])
                    }
                }
            },
            changeDetailVisible(bool) {
                this.centerDialogVisible = bool
            },
            computeMargin(listIndex, ListLength) {
                switch (ListLength) {
                    case 1:
                        return 30;
                    case 2:
                        return 0;
                    case 3:
                    case 4:
                    case 5:
                        return listIndex % 2 === 1 ? -30 : 30;
                }
            },
            computeFloat(listIndex, ListLength, sceneType, index) {
                switch (ListLength) {
                    case 1:
                        return 0;
                    case 2:
                        return (listIndex) % 2 === 1 ? -15 - (index - 1) * 10 + (sceneType - 1) * 10 : 15 + (index - 1) * 10 - (sceneType - 1) * 10;
                    case 3:
                        return listIndex === 1 ? 0 : (listIndex === 0 ? -15 - (index - 1) * 10 + (sceneType - 1) * 10 : 15 + (index - 1) * 10) - (sceneType - 1) * 10;
                    case 4:
                        return listIndex / 1 > 1 ? -15 - (index - 1) * 10 + (sceneType - 1) * 10 : 15 + (index - 1) * 10 - (sceneType - 1) * 10;
                    case 5:
                        return listIndex === 2 ? 0 : listIndex / 2 > 1 ? -15 - (index - 1) * 10 + (sceneType - 1) * 10 : 15 + (index - 1) * 10 - (sceneType - 1) * 10;
                }
            },
            async getSectionList() {
                let teachingAssistantList = this.$store.getters.getSubjectTeachingAssistant(this.$store.state.Counter.subject | 0);
                let classId = this.$store.getters.getClassId;
                let sectionList = [];
                for (let key in teachingAssistantList) {
                    let resA = await NetUtil.post(URL.teachingAssistant.getUnRead, {
                        teachingAssistantId: teachingAssistantList[key].id,
                        classId: classId,
                        status: 1
                    });
                    let resB = await NetUtil.post(URL.teachingAssistant.getUnRead, {
                        teachingAssistantId: teachingAssistantList[key].id,
                        classId: classId,
                        status: 2
                    });
                    let res = resA.concat(resB);
                    if (!res || res.length === 0) {
                        console.log('return');
                    } else {
                        for (let catalog of res) {
                            catalog['teachingAssistantTitle'] = teachingAssistantList[key].title;
                            catalog['sceneType'] = teachingAssistantList[key].sceneType;
                            await this.getSectionDetail(catalog.teachingAssistantCatalogId);
                            if ((this.hasNum[catalog.teachingAssistantCatalogId] ? this.hasNum[catalog.teachingAssistantCatalogId] : 0) > 0) sectionList.push(catalog);
                            // });
                        }
                    }
                }
                if (sectionList.length === 0) {
                    this.$notify({
                        title: '提示',
                        message: '当前科目未提交作业',
                        duration: 3000,
                        showClose: false
                    });
                }
                this.sectionList = sliceArray(sectionList, 5);

            },
            async getSectionDetail(catalogId) {
                if (catalogId === '' || typeof catalogId === 'undefined') return;
                // this.catalogId = catalogId;
                let sectionDetailData = [];
                sectionDetailData.push(await NetUtil.post(URL.teachingAssistant.getSectionDetail, {
                    classId: this.$store.getters.getClassId,
                    teachingAssistantCatalogId: catalogId
                }));
                sectionDetailData.push(await NetUtil.post(URL.teachingAssistant.getCatalogQuestionCount, {teachingAssistantCatalogId: catalogId}));
                let num = 0;
                for (let x in sectionDetailData[0]) {
                    if (sectionDetailData[0][x] > 0) {
                        num++;
                    }
                }
                if (this.hasNum.catalogId !== undefined) {
                    this.hasNum.catalogId = num;
                } else {

                    this.$set(this.hasNum, catalogId, num);
                }
                if (this.sectionDetailData.catalogId !== undefined) {
                    this.sectionDetailData.catalogId = sectionDetailData;
                } else {

                    this.$set(this.sectionDetailData, catalogId, sectionDetailData);
                }
                if (this.members.catalogId !== undefined) {
                    this.members.catalogId = this.getMember(sectionDetailData[0]).sort(this.compare(this.sortBy));
                } else {

                    this.$set(this.members, catalogId, this.getMember(sectionDetailData[0]).sort(this.compare(this.sortBy)));
                }
            }
        },
        beforeRouteLeave(to, from, next) {
            this.intId.map((value) => {
                try {
                    clearInterval(value)
                } catch (e) {
                    console.log(e)
                }
            });

            if (this.intTid.length !== 0)
                this.intTid.map((value) => {
                    try {
                        clearTimeout(value)
                    } catch (e) {
                        console.log(e)
                    }
                });
            next();
        }
    }
</script>

<style scoped>

</style>
